/*
 * CloudBeaver - Cloud Database Manager
 * Copyright (C) 2020-2024 DBeaver Corp and others
 *
 * Licensed under the Apache License, Version 2.0.
 * you may not use this file except in compliance with the License.
 */

.menuBarItemGroup,
.menuBarItem,
.menuBarItemCustomSubmenuMark {
  composes: theme-ripple from global;
  cursor: pointer;
  background: transparent;
  outline: none;
  color: inherit;
  padding: 0;
}

.menuBarItemGroup {
  display: flex;

  &.disabled {
    pointer-events: none;
  }

  &.hidden {
    display: none;
  }

  & .menuBarItem {
    padding: 0 8px;

    & .menuBarItemBox {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    & .menuBarItemIcon {
      display: flex;
      width: 24px;
      height: 24px;
      padding: 4px;
      box-sizing: border-box;
      align-items: center;
      justify-content: center;

      &:empty {
        display: none;
      }

      & .iconOrImage {
        display: block;
        object-fit: contain;
      }
    }

    & .loader,
    & .iconOrImage {
      width: 16px;
    }

    & .menuBarItemLabel {
      display: block;
      text-transform: uppercase;
      font-weight: 700;
      font-size: 12px;
    }

    & .menuBarItemMark {
      display: none;

      & .icon {
        width: 12px;
      }
    }
  }

  & .menuBarItemCustomSubmenuMark {
    display: flex;
    align-items: center;
    width: 14px;
    min-height: 24px;
    height: 100%;

    & .icon {
      width: 14px;
      height: 14px;
      fill: var(--mdc-theme-on-secondary, #6d6d6d);
    }
  }
}

.floating {
  & .menuBarItemGroup {
    margin: 2px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--theme-form-element-radius);

    & .menuBarItem {
      padding: 4px;
      width: 24px;
      height: 24px;
    }
    & .menuBarItemLabel {
      display: none;
    }
    & .menuBarItemIcon {
      width: 16px;
      height: 16px;
      padding: 0px;
    }
  }

  &.withLabel {
    & .menuBarItemGroup {
      & .menuBarItem {
        width: auto;
      }
      & .menuBarItemLabel {
        display: block;
      }
    }
  }
}
